<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>超详细Hexo+Github Page搭建技术博客教程【持续更新】 | 乘风破浪</title><meta name="keywords" content="Hexo,Github Page,SEO"><meta name="author" content="PAN"><meta name="copyright" content="PAN"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="前言博客有第三方平台，也可以自建，比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。 这次我要说的就是 Github Page + Hexo 搭建个人博客的方式！Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、">
<meta property="og:type" content="article">
<meta property="og:title" content="超详细Hexo+Github Page搭建技术博客教程【持续更新】">
<meta property="og:url" content="https://geekweb.site/2018/12/20/hexo/index.html">
<meta property="og:site_name" content="乘风破浪">
<meta property="og:description" content="前言博客有第三方平台，也可以自建，比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。 这次我要说的就是 Github Page + Hexo 搭建个人博客的方式！Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2021/03/26/cBT8YwElLCU5qFV.png">
<meta property="article:published_time" content="2018-12-20T02:12:06.000Z">
<meta property="article:modified_time" content="2020-09-25T10:29:01.844Z">
<meta property="article:author" content="PAN">
<meta property="article:tag" content="Hexo">
<meta property="article:tag" content="Github Page">
<meta property="article:tag" content="SEO">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2021/03/26/cBT8YwElLCU5qFV.png"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://geekweb.site/2018/12/20/hexo/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":false,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2020-09-25 18:29:01'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    })(window)</script><meta name="generator" content="Hexo 5.2.0"><link rel="alternate" href="/atom.xml" title="乘风破浪" type="application/atom+xml">
</head><body><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" src="https://i.loli.net/2020/09/25/RVKnjUAof6kryGi.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">13</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 清单</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://i.loli.net/2021/03/26/cBT8YwElLCU5qFV.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">乘风破浪</a></span><div id="menus"><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> 清单</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">超详细Hexo+Github Page搭建技术博客教程【持续更新】</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2018-12-20T02:12:06.000Z" title="发表于 2018-12-20 10:12:06">2018-12-20</time><span class="post-meta-separator"></span></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/Hexo/">Hexo</a></span></div><div class="meta-secondline"></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>博客有第三方平台，也可以自建，比较早的有博客园、CSDN，近几年新兴的也比较多诸如：WordPress、segmentFault、简书、掘金、知乎专栏、Github Page 等等。</p>
<p>这次我要说的就是 Github Page + Hexo 搭建个人博客的方式！Github Page 是 Github 提供的一种免费的静态网页托管服务（所以想想免费的空间不用也挺浪费的哈哈哈），可以用来托管博客、项目官网等静态网页。支持 Jekyll、Hugo、Hexo 编译静态资源，这次我们的主角就是 Hexo 了，具体的内容下面在文章内介绍。</p>
<p>下面就开始吧~</p>
<h2 id="准备环境"><a href="#准备环境" class="headerlink" title="准备环境"></a>准备环境</h2><p>准备 node 和 git 环境，<br>首先，安装 <a target="_blank" rel="noopener" href="https://nodejs.org/en/">NodeJS</a>，因为 <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/">Hexo</a> 是基于 Node.js 驱动的一款博客框架，相比起前面提到过的 Jekyll 框架更快更简洁，因为天*朝网络被墙的原因尝试过安装 Jekyll 失败而放弃了。<br>然后，安装 <a target="_blank" rel="noopener" href="https://git-scm.com/">git</a>，一个分布式版本控制系统，用于项目的版本控制管理，作者是 Linux 之父。如果 Git 还不熟悉可以参考廖雪峰大神的 <a target="_blank" rel="noopener" href="https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">Git</a> 教程。</p>
<p>两个工具不同的平台安装方法有所不一样，可自行了解按步骤安装，这里不详述了。安装成功后打开git bash（Windowns）或者终端（Mac），下方中将统一称为命令行。<br>在命令行中输入相应命令验证是否成功，如果成功会有相应的版本号。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git version</span><br><span class="line">node -v</span><br><span class="line">npm -v</span><br></pre></td></tr></table></figure>

<p><img src="https://wx3.sinaimg.cn/large/889d1a94gy1fz2nmvl6kej20g907dwet.jpg" alt="image"></p>
<h2 id="安装-Hexo"><a href="#安装-Hexo" class="headerlink" title="安装 Hexo"></a>安装 Hexo</h2><p>如果以上环境准备好了就可以使用 npm 开始安装 Hexo 了。也可查看 <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/">Hexo</a> 的详细文档。<br>在命令行输入执行以下命令：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install -g hexo-cli</span><br></pre></td></tr></table></figure>

<p>安装 Hexo 完成后，再执行下列命令，Hexo 将会在指定文件夹中新建所需要的文件。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">hexo init myBlog</span><br><span class="line"><span class="built_in">cd</span> myBlog</span><br><span class="line">npm install</span><br></pre></td></tr></table></figure>

<p>新建完成后，指定文件夹的目录如下：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">.</span><br><span class="line">├── _config.yml <span class="comment"># 网站的配置信息，您可以在此配置大部分的参数。 </span></span><br><span class="line">├── package.json</span><br><span class="line">├── scaffolds <span class="comment"># 模版文件夹</span></span><br><span class="line">├── <span class="built_in">source</span>  <span class="comment"># 资源文件夹，除 _posts 文件，其他以下划线_开头的文件或者文件夹不会被编译打包到public文件夹</span></span><br><span class="line">|   ├── _drafts <span class="comment"># 草稿文件</span></span><br><span class="line">|   └── _posts <span class="comment"># 文章Markdowm文件 </span></span><br><span class="line">└── themes  <span class="comment"># 主题文件夹</span></span><br></pre></td></tr></table></figure>

<p>好了，如果上面的命令都没报错的话，就恭喜了，运行 hexo s 命令，其中 s 是 server 的缩写，在浏览器中输入 <a target="_blank" rel="noopener" href="http://localhost:4000/">http://localhost:4000</a> 回车就可以预览效果了。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo s</span><br></pre></td></tr></table></figure>

<p>以下是我本地的预览效果，更换了 next 主题的，默认不是这个主题。</p>
<p><img src="https://ws1.sinaimg.cn/large/889d1a94gy1fz2r6obbifj21bo0mfdjx.jpg" alt="image"></p>
<p>至此，你本地的博客就已经搭建成功，接下来就是部署到 Github Page 了。</p>
<h2 id="注册-Github"><a href="#注册-Github" class="headerlink" title="注册 Github"></a>注册 Github</h2><p>首先如果你还没有 Github 账号的先<a target="_blank" rel="noopener" href="https://github.com/">注册</a>一个，具体过程如下</p>
<p><img src="https://ws3.sinaimg.cn/large/889d1a94gy1fz2ovhptzgj20n90rk12d.jpg" alt="image"></p>
<p>点击 Start project 或者下面的 new repository 创建一个新的仓库</p>
<p><img src="https://wx2.sinaimg.cn/large/889d1a94gy1fz2p5l7j6cj20sk0h8wju.jpg" alt="image"></p>
<p>注意点来了，Github 仅能使用一个同名仓库的代码托管一个静态站点，这个网上很多教程没说到的。</p>
<p><img src="https://ws3.sinaimg.cn/large/889d1a94gy1fz2po2plspj20kr0hbtbb.jpg" alt="image"></p>
<p>然后打开仓库创建一个 index.html 文件，并随意先写点内容，比如 Hello World.</p>
<p><img src="https://ws2.sinaimg.cn/large/889d1a94gy1fz2q91ar2zj20s80e50va.jpg" alt="image"><br><img src="https://ws1.sinaimg.cn/large/889d1a94gy1fz2qami35uj20dt06a74t.jpg" alt="image"></p>
<p>这个时候打开 http://你的用户名.github.io 就可以看到你的站点啦，是不是很简单！index.html 内容只是暂时的预览效果，后面把 Hexo 的文件部署上去就可以在 http://你的用户名.github.io 看到你自己的博客啦！ 比如我的就是 <a target="_blank" rel="noopener" href="http://webw3c.github.io/">http://webw3c.github.io</a> 了。</p>
<p><img src="https://wx4.sinaimg.cn/large/889d1a94gy1fz2pwjzahzj20c0040mx4.jpg" alt="image"></p>
<h2 id="配置-SSH-key"><a href="#配置-SSH-key" class="headerlink" title="配置 SSH key"></a>配置 SSH key</h2><p>要使用 git 工具首先要配置一下SSH key，为部署本地博客到 Github 做准备。</p>
<p>打开命令行输入 cd ~/.ssh 如果没报错或者提示什么的说明就是以前生成过的，直接使用 cat ~/.ssh/id_rsa.pub 命令就是可以查看本机上的 SSH key 了。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cat ~/.ssh/id_rsa.pub</span><br></pre></td></tr></table></figure>

<p><img src="https://wx4.sinaimg.cn/large/889d1a94gy1fz2rym90u1j20fr03jgm6.jpg" alt="image"></p>
<p>如果之前没有创建，则执行以下命令全局配置一下本地账户：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git config --global user.name <span class="string">&quot;用户名&quot;</span></span><br><span class="line">git config --global user.email <span class="string">&quot;邮箱地址&quot;</span></span><br></pre></td></tr></table></figure>

<p>然后开始生成密钥 SSH key</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh-keygen -t rsa -C <span class="string">&#x27;上面的邮箱&#x27;</span></span><br></pre></td></tr></table></figure>

<p>按照提示完成三次回车，即可生成 ssh key。通过查看 ~/.ssh/id_rsa.pub 文件内容，获取到你的 SSH key</p>
<p><img src="https://wx2.sinaimg.cn/large/889d1a94gy1fz2s3i3zi0j20iz0anq7a.jpg" alt="image"></p>
<p>（此图引用自码云）</p>
<p>首次使用还需要确认并添加主机到本机SSH可信列表。若返回 Hi xxx! You’ve successfully authenticated, but GitHub does not provide shell access. 内容，则证明添加成功。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">ssh -T git@github.com </span><br></pre></td></tr></table></figure>


<p><img src="https://ws1.sinaimg.cn/large/889d1a94gy1fz2s6m2kjwj20fq01g3yg.jpg" alt="image"></p>
<p>到这还没完，还要登录 <a target="_blank" rel="noopener" href="https://github.com/">Github</a> 上添加刚刚生成的SSH key，按以下步骤添加：</p>
<p><img src="https://ws2.sinaimg.cn/large/889d1a94gy1fz2s9u4bi4j205n0as0t0.jpg" alt="image"></p>
<p>创建一个新的 SSH key, 标题随便，key 就填刚才生成那个，确认创建，搞定！！这样在你的 SSH keys 列表里就会看到你刚刚添加的密钥。</p>
<p><img src="https://wx2.sinaimg.cn/large/889d1a94gy1fz2sc8liqmj20sb0c9jtg.jpg" alt="image"></p>
<h2 id="部署到-Github"><a href="#部署到-Github" class="headerlink" title="部署到 Github"></a>部署到 Github</h2><p>此时，本地和Github的工作做得差不了，是时候把它们两个连接起来了。你也可以查看官网的<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/deployment">部署</a>教程。<br>先不着急，部署之前还需要修改配置和安装部署插件。<br>第一：打开项目根目录下的 _config.yml 配置文件配置参数。拉到文件末尾，填上如下配置（也可同时部署到多个仓库，后面再说）：</p>
<p><img src="https://wx2.sinaimg.cn/large/889d1a94gy1fz2srao2z2j20f104ewey.jpg" alt="image"></p>
<p>第二：要安装一个部署插件 <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo-deployer-git">hexo-deployer-git</a>。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure>

<p>最后执行以下命令就可以部署上传啦，以下 g 是 generate 缩写，d 是 deploy 缩写：</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo g -d</span><br></pre></td></tr></table></figure>

<p>稍等一会，在浏览器访问网址： https://你的用户名.github.io 就会看到你的博客啦！！</p>
<h2 id="开始写作"><a href="#开始写作" class="headerlink" title="开始写作"></a>开始写作</h2><p>博客搭好了，就开始写文章了，这里简单介绍一下，详细的文档可以看 <a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/">hexo</a> 官网。<br>新建文章，输入以下命令即可</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new <span class="string">&#x27;文章标题&#x27;</span></span><br></pre></td></tr></table></figure>
<p>执行完成后可以在 /source/_posts 下看到一个“文章标题.md”的文章文件啦。.md 就是 Markdown 格式的文件，具体用法可以在网上找一下，语法还是比较简单的。</p>
<p>在 Markdown 文章里面输入你的文章内容</p>
<p><img src="https://ws1.sinaimg.cn/large/889d1a94gy1fz5x2qhmzbj216e0c50us.jpg" alt="image"></p>
<p>再执行一下以下命令</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo g</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo s</span><br></pre></td></tr></table></figure>

<p>就可以看到你的文章在博客显示了，以下就是刚刚</p>
<p><img src="https://wx1.sinaimg.cn/large/889d1a94gy1fz5x6potcgj20vk0e10te.jpg" alt="image"></p>
<p>最后，只要部署到你的 Github 上就可以了！</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br></pre></td></tr></table></figure>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo g -d</span><br></pre></td></tr></table></figure>

<p>部署前最好能先执行一下 hexo clean 命令，清除缓存文件 (db.json) 和已生成的静态文件 (public)。在某些情况（尤其是更换主题后），如果发现您对站点的更改无论如何也不生效，您可能需要运行该命令。</p>
<p>另外，如果你的文章暂时不发布可以先保存在草稿里面。生成草稿的方法和文章差不多 hexo new draft “文章标题”，生成后会在 /source/_drafts 里看到你的草稿文章。当你想发布时只要执行 publish 命令即可发布到博客。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo publish [layout] &lt;filename&gt;</span><br></pre></td></tr></table></figure>

<h2 id="静态图床"><a href="#静态图床" class="headerlink" title="静态图床"></a>静态图床</h2><p>文章里用的一些图片放哪里比较好呢？比对了几个免费的图床七牛、sm.ms和微博图床，最后我决定选用微博的，七牛的好像最近是<a target="_blank" rel="noopener" href="https://developer.qiniu.com/fusion/kb/1319/test-domain-access-restriction-rules">测试域名</a>不能用了，虽然有解决方案，但怕以后还会有其他问题，所以放弃啦，毕竟免费的东西才是最贵的，特别像云储存这种东西，感觉都是钱钱钱，哈哈哈，万一有一天不让用就比较麻烦了，另外<a target="_blank" rel="noopener" href="https://sm.ms/">sm.ms</a>这个口碑也不错，好像是个人开发的，免费好几年了，有同样的担心就放弃了，最好抱了新浪的大腿，感觉新浪应该会靠谱一点吧，唯一的问题就是如果有一天新浪禁止外链的话就不行了，再看吧。</p>
<p>可以去chrome网上应用商店下载一个叫<a target="_blank" rel="noopener" href="https://chrome.google.com/webstore/detail/%E5%BE%AE%E5%8D%9A%E5%9B%BE%E5%BA%8A/pinjkilghdfhnkibhcangnpmcpdpmehk?hl=zh-CN">微博图床</a>的chrome插件，下图是插件的界面，操作简单方便，具体使用看说明就可以啦，比较简单，这样图床的问题就解决了。</p>
<p><img src="https://ws2.sinaimg.cn/large/889d1a94gy1fz72py0lycj20nw0go40c.jpg" alt="image"></p>
<h2 id="主题配置"><a href="#主题配置" class="headerlink" title="主题配置"></a>主题配置</h2><p>你可以到<a target="_blank" rel="noopener" href="https://hexo.io/themes/">官网主题页</a>或者网上找你喜欢的，很多都不错，我使用的是 next 主题。你可以根据主题<a target="_blank" rel="noopener" href="http://theme-next.iissnan.com/getting-started.html">官网使用文档</a>说明修改相应的配置，达到自己想要的效果。例如设置字体、开启打赏功能、添加评论系统、设置腾讯公益404页面、数据统计、内容分享等等功能。这里我说一下简单说一下我个人用到的一些配置。</p>
<h3 id="一、添加评论系统"><a href="#一、添加评论系统" class="headerlink" title="一、添加评论系统"></a>一、添加评论系统</h3><p><strong>* 注意我现在已经改用 gitalk 啦，而下面是之前写的 valine 的教程，后面有空会更新或者增加这部分相应的内容，当然，如果你想使用的是 valine 可以继续参考下面的方法配置 *</strong></p>
<p>添加 <a target="_blank" rel="noopener" href="https://valine.js.org/">valine</a> 评论系统，打开 /themes/next/_config.yml 文件，搜索 valine，开启 valine，设置 enable 为 true。</p>
<p><img src="https://ws3.sinaimg.cn/large/889d1a94gy1fz5yqhmvbqj20x009dq5c.jpg" alt="image"></p>
<p>然后到 leanCloud <a target="_blank" rel="noopener" href="https://leancloud.cn/dashboard/login.html#/signin">登录</a>或者<a target="_blank" rel="noopener" href="https://leancloud.cn/dashboard/login.html#/signup">注册</a> 一个账号，注册后登录创建一个应用，然后进入应该到设置里面找到 AppId 和 AppKey 复制粘贴到主题配置文件里面对应的地方，就是上图中的 appid 和 appkey 这两个地方。</p>
<p><img src="https://wx3.sinaimg.cn/large/889d1a94gy1fz5ywov61yj20zj0ea777.jpg" alt="image"></p>
<h3 id="二、配置腾讯公益404页面"><a href="#二、配置腾讯公益404页面" class="headerlink" title="二、配置腾讯公益404页面"></a>二、配置腾讯公益404页面</h3><ol>
<li>在博客根目录 /source 文件夹下创建404.html（具体内容见下图及代码）；</li>
<li>在 html 上方加入上面3行代码；</li>
</ol>
<p>腾讯公益用到的js其实有有三个，search_children.js、data.js以及page.js，如果你的站点协议是 http 的话直接按照 next 文件的方法添加就可以了，但如果是 https 话直接添加是会报错的，因为腾讯公益404页面暂时还不支持 https，所以我直接把 page.js 的内容直接加入到页面是可以成功的，请看下图</p>
<p><img src="https://wx4.sinaimg.cn/large/889d1a94gy1fz5zivfhysj210n0cpq5c.jpg" alt="image"></p>
<p>上图最前面的那几行也要加进去哦。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">layout: <span class="literal">false</span></span><br><span class="line">title: <span class="string">&quot;404&quot;</span></span><br><span class="line">---</span><br></pre></td></tr></table></figure>

<p>这里放一下上面用到的几个js链接，来自腾讯公益404官方<a target="_blank" rel="noopener" href="https://www.qq.com/404/">接入文档</a></p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;script <span class="built_in">type</span>=<span class="string">&quot;text/plain&quot;</span> src=<span class="string">&quot;http://www.qq.com/404/search_children.js&quot;</span> charset=<span class="string">&quot;utf-8&quot;</span> homePageUrl=<span class="string">&quot;https://pojian.xyz&quot;</span> homePageName=<span class="string">&quot;回到我的博客主页&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src=<span class="string">&quot;https://qzone.qq.com/gy/404/data.js&quot;</span> charset=<span class="string">&quot;utf-8&quot;</span>&gt;&lt;/script&gt;</span><br><span class="line">&lt;script src=<span class="string">&quot;https://qzone.qq.com/gy/404/page.js&quot;</span> charset=<span class="string">&quot;utf-8&quot;</span>&gt;&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<p>你也可以直接复制我 Github 上的<a target="_blank" rel="noopener" href="https://github.com/webw3c/webw3c.github.io/blob/master/404.html">404页面代码</a>，以下是我博客的预览效果。</p>
<p><img src="https://ws1.sinaimg.cn/large/889d1a94gy1fz5zpo960mj21hb0r5jxt.jpg" alt="image"></p>
<p>另外如果需要自定义个性化404页面的只要删除相应腾讯的JS，直接修改上面的 404.html 文件就可以了。</p>
<h3 id="三、添加字数统计和阅读时长"><a href="#三、添加字数统计和阅读时长" class="headerlink" title="三、添加字数统计和阅读时长"></a>三、添加字数统计和阅读时长</h3><p>首先安装一个插件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ npm install hexo-symbols-count-time --save</span><br></pre></td></tr></table></figure>

<p>接着博客根目录下的配置文件里添加以下配置</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 文章字数统计</span></span><br><span class="line">symbols_count_time:</span><br><span class="line">  symbols: <span class="literal">true</span></span><br><span class="line">  time: <span class="literal">true</span></span><br><span class="line">  total_symbols: <span class="literal">true</span></span><br><span class="line">  total_time: <span class="literal">true</span></span><br></pre></td></tr></table></figure>

<p>最后到 next 主题的配置文件下开启 symbols_count_time 字段</p>
<p><img src="https://ws4.sinaimg.cn/large/889d1a94gy1fz7fsfyw5hj20rx05gt97.jpg" alt="image"></p>
<p>重启一下 hexo 就可以看到效果啦</p>
<p><img src="https://ws2.sinaimg.cn/large/889d1a94gy1fz7fu1u1l8j20vq08p75j.jpg" alt="image"></p>
<h3 id="四、开启fancybox"><a href="#四、开启fancybox" class="headerlink" title="四、开启fancybox"></a>四、开启fancybox</h3><p>打开主题配置文件搜索 fancybox 设置为 true，另外，vendors 填上对应 CDN 地址即可开启</p>
<p><img src="https://wx3.sinaimg.cn/large/889d1a94gy1fz7fy76s0uj20n50cimzp.jpg" alt="image"></p>
<h3 id="五、文章分享"><a href="#五、文章分享" class="headerlink" title="五、文章分享"></a>五、文章分享</h3><p>百度分享有个 https 的坑，按网上的方法把文件放到自己的服务器是我以前在其他的网站上测试过是能使用的，但在 hexo 中却报错了，具体不清楚是什么原因，感觉可能是 hexo 版本的问题，因为有的人可以，有的人报和我一样的错误，忘记截图了。因为这个功能也没有十分需要，就不继续爬了。换了 <a target="_blank" rel="noopener" href="https://github.com/overtrue/share.js">share.js</a> 实现了同样的功能，具体可以看本文文末的效果。</p>
<h2 id="绑定域名"><a href="#绑定域名" class="headerlink" title="绑定域名"></a>绑定域名</h2><p>如果你感觉直接使用 github.io 的域名作为你的博客链接不够专业，不够程序员的话那么就购买一个域名解析绑定到你的博客，我也比较建议这样做。<br>我的是在阿里万网<a target="_blank" rel="noopener" href="https://wanwang.aliyun.com/domain/?spm=5176.100251.111252.17.365b4f157s4Od7">注册</a>的，注册流程比较常规这里就不多详述了，</p>
<p>注册登录控制台后找到你的域名，点右侧的解析按钮进去解析列表</p>
<p><img src="https://wx1.sinaimg.cn/large/889d1a94gy1fz68md161tj21hc0f3q6e.jpg" alt="image"><br><img src="http://wx3.sinaimg.cn/large/889d1a94gy1fz68pz0zjuj21fw0dtwgt.jpg" alt="image"></p>
<p>点右边的“添加记录”添加两条 CNAME 类型的记录，如上图，后面的记录值就填写你们自己的 Github 地址哈</p>
<p>记录添加完后就要到 <a target="_blank" rel="noopener" href="https://www.github.com/">Github</a> 设置绑定你购买的域名了，进入你的博客仓库点 Setting，然后拉到 GitHub Pages 那里填上你的申请购买的域名保存就可以了</p>
<p><img src="https://ws1.sinaimg.cn/large/889d1a94gy1fz68xr3w2fj20sf05xgmd.jpg" alt="image"><br><img src="https://ws4.sinaimg.cn/large/889d1a94gy1fz68zmvj8ij20l90i5gny.jpg" alt="image"></p>
<p>这里说下，当你点击保存的时候 Github Pages 会自动帮你生成一个 CNAME 的文件在根目录，里面的内容就是你绑定的域名地址</p>
<p><img src="https://wx1.sinaimg.cn/large/889d1a94gy1fz694nu6n0j20tp0a4abc.jpg" alt="image"></p>
<p>注意，如果是按上面的方法操作还会有一点小问题，就是当你执行 hexo d 部署你本地的文章到 Github 时，你本地的文件会全部覆盖掉你现有仓库上的所有内容，包括 Github Pages 帮你创建的那个 CNAME 文件，这样的话当你访问域名的时候又会访问不到了。所以呢，你需要自己手动在本地根目录 /source 目录下手动创建一个 CNAME 文件，内容就是你的域名地址，因为 source 目录下的文件部署的时候是不会被删除的，所以部署的时候也会一起被部署上去，最后还需要重新到你仓库 Setting，拉到 GitHub Pages 那里再一次绑定你的域名，这样以后就没问题了。</p>
<p>稍等一会就可以用你申请的域名就访问你的博客了！</p>
<h2 id="SEO优化"><a href="#SEO优化" class="headerlink" title="SEO优化"></a>SEO优化</h2><p>接下来说下百度收录，据说 Github 屏蔽了百度的蜘蛛，也有的人说没，具体不是很清楚，Github 在2015的时候遭受了史上最大规模的DDoS攻击，有国外媒体指百度干的，具体不得而知啦，但感觉百度收录 Github 确认是比较难，时间也比较长，所以还是优化一下吧。</p>
<h3 id="一、代码同时部署到-coding"><a href="#一、代码同时部署到-coding" class="headerlink" title="一、代码同时部署到 coding"></a>一、代码同时部署到 coding</h3><p>那有什么方法呢？就是把博客站点同时托管在国内的 coding 平台上，这样收录就会容易很多，同时又不影响 Github 上的代码，<a target="_blank" rel="noopener" href="https://coding.net/">coding</a> 是国内的一个提供代码托管服务的平台，跟 Github 差不多。使用方法也和 Github 差不多，下面我就具体说一下怎么把代码同时部署到 coding 和 Github 上面，让百度更容易收录。</p>
<p><a target="_blank" rel="noopener" href="https://coding.net/register">注册</a>、<a target="_blank" rel="noopener" href="https://coding.net/login">登录</a> coding 后创建一个新的仓库，注意点就是新建项目的时候命名规则和 Github 上的一样，就是 <strong>用户名.coding.me</strong> 可以看下图，还有记得别忘了添加 SSH key</p>
<p><img src="https://ws2.sinaimg.cn/large/889d1a94gy1fz78hhe593j20qw05dmxe.jpg" alt="image"></p>
<p>仓库建好后进入仓库，选左侧的 Page 服务，在设置中绑定新的域名，输入后点击绑定就可以了</p>
<p><img src="https://ws2.sinaimg.cn/large/889d1a94gy1fz78v08sssj21fn0ppgrv.jpg" alt="image"></p>
<p>接着到你的域名解析控制台修改添加两条 CNAME 记录指向你的 Page 地址，看下图，注意看记录值哦，换成你自己的。</p>
<p><img src="https://wx3.sinaimg.cn/large/889d1a94gy1fz78yh3racj21ay0czgnm.jpg" alt="image"></p>
<p>最后呢修改根目录下的 _config.yml 配置文件中的部署配置，把 coding 的 git 地址添加进去就行了</p>
<p><img src="https://wx3.sinaimg.cn/large/889d1a94gy1fz793dwgpfj20p005paak.jpg" alt="image"></p>
<p>最后执行部署命令</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">hexo clean</span><br><span class="line">hexo g -d</span><br></pre></td></tr></table></figure>

<p>这时就可以在 coding 仓库中看到你提交部署的代码了，同时 你的用户名.coding.me 也可以访问你的博客站点了，这里 Github 和 coding 的代码是同时更新的，互不影响。而绑定的域名解析可能需要稍等一会才会生效。</p>
<h3 id="二、百度提交链接"><a href="#二、百度提交链接" class="headerlink" title="二、百度提交链接"></a>二、百度提交链接</h3><p>部署到 coding 后也不是百度就可以收录的，我们还需要继续优化。如果在百度搜索输入 site:你的域名 如果出现以下的效果证明就是网站还没被百度收录的，我们现在点下面的<a target="_blank" rel="noopener" href="https://ziyuan.baidu.com/linksubmit/url">提交网址</a>，进入百度站长工具提交。</p>
<p><img src="https://wx4.sinaimg.cn/large/889d1a94gy1fz7a9r2nifj20w209x0ty.jpg" alt="image"></p>
<h3 id="三、百度站长平台添加网站管理"><a href="#三、百度站长平台添加网站管理" class="headerlink" title="三、百度站长平台添加网站管理"></a>三、百度站长平台添加网站管理</h3><p>注册<a target="_blank" rel="noopener" href="https://ziyuan.baidu.com/site/">百度站长</a>工具，并添加网站</p>
<p><img src="https://wx3.sinaimg.cn/large/889d1a94gy1fz7amrsnmoj20ym0aeabo.jpg" alt="image"></p>
<p>添加网站的过程有三步，主要操作集中在最后一步的网站验证方式里，我选择的是 HTML标签验证，按下面使用方法添加代码到你的网站即可</p>
<p><img src="https://ws2.sinaimg.cn/large/889d1a94gy1fz7atp67kej20s70l2tav.jpg" alt="image"></p>
<p>而使用 next 主题的同学可以直接在主题的配置文件下搜索 baidu_site_verification 后面填上第三步中 meta 标签中 content 的值就可以</p>
<p><img src="https://ws1.sinaimg.cn/large/889d1a94gy1fz7aydsnr6j20rz0asn02.jpg" alt="image"></p>
<p>最后点完成验证就可以通过了。</p>
<h3 id="四、添加sitemap站点地图"><a href="#四、添加sitemap站点地图" class="headerlink" title="四、添加sitemap站点地图"></a>四、添加sitemap站点地图</h3><p>站点地图包含了你网站上的站点链接，方便搜索引擎蜘蛛的抓取工作，搜索蜘蛛会通过网站地图中链接的深层次爬行，抓取新的内容。所以我们要生成 sitemap 文件助于网站优化，安装生成插件</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-generator-sitemap --save</span><br><span class="line">npm install hexo-generator-baidu-sitemap --save</span><br></pre></td></tr></table></figure>

<p>接着在博客根目录下的配置文件里添加对应配置项</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># sitemap</span></span><br><span class="line">sitemap:</span><br><span class="line">  path: sitemap.xml</span><br><span class="line">baidusitemap:</span><br><span class="line">  path: baidusitemap.xml</span><br></pre></td></tr></table></figure>

<p>注意缩进，要不会编译报错</p>
<p>还要修改一个根目录配置文件下的URL，url 一项的值改成你在百度站长平台里面添加的自己站点的地址，这样生成的 sitemap.xml 文件里的 url 才是你站点的地址，看下图</p>
<p><img src="https://wx3.sinaimg.cn/large/889d1a94gy1fz7cay1xf9j20qc03wjrs.jpg" alt="image"></p>
<h3 id="五、添加蜘蛛协议robots-txt"><a href="#五、添加蜘蛛协议robots-txt" class="headerlink" title="五、添加蜘蛛协议robots.txt"></a>五、添加蜘蛛协议robots.txt</h3><p>增加 robots.txt 文件，就是蜘蛛协议，新建 robots.txt 文件添加以下内容，把 robots.txt 放在 /source 文件下，我们前面说过 /source 目录下的文件是会被打包上传的。</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># hexo robots.txt</span></span><br><span class="line">User-agent: *</span><br><span class="line">Allow: /</span><br><span class="line">Allow: /archives/</span><br><span class="line"></span><br><span class="line">Disallow: /vendors/</span><br><span class="line">Disallow: /js/</span><br><span class="line">Disallow: /css/</span><br><span class="line">Disallow: /fonts/</span><br><span class="line">Disallow: /vendors/</span><br><span class="line">Disallow: /fancybox/</span><br><span class="line"></span><br><span class="line">Sitemap: https://pojian.xyz/sitemap.xml</span><br><span class="line">Sitemap: https://pojian.xyz/baidusitemap.xml</span><br></pre></td></tr></table></figure>

<p>Allow后面的就是你的menu，还有最下面的 Sitemap 地址请自行改成你们自己的地址</p>
<p>完成后，重启hexo，执行 hexo g -d 重新生成文件并提交后，在public目录下会生成对应的xml文件。可以通过 <a target="_blank" rel="noopener" href="http://xxx.com/sitemap.xml">http://xxx.com/sitemap.xml</a> 和 <a target="_blank" rel="noopener" href="http://xxx.com/baidusitemap.xml">http://xxx.com/baidusitemap.xml</a> 访问到 sitemap 文件，通过 <a target="_blank" rel="noopener" href="http://xxx.com/robots.txt">http://xxx.com/robots.txt</a> 访问到 robots.txt 文件。</p>
<p>可以到百度站长检测一下 robots.txt 文件是否生效</p>
<p><img src="https://ws1.sinaimg.cn/large/889d1a94gy1fz7df4tdohj210m0pnag3.jpg" alt="image"></p>
<h3 id="六、自动推送"><a href="#六、自动推送" class="headerlink" title="六、自动推送"></a>六、自动推送</h3><p>百度有自动推送、主动推送、sitemap、手动提交几种方式。<br>自动推送是轻量级链接提交组件，将自动推送的JS代码放置在站点每一个页面源代码中，当页面被访问时，页面链接会自动推送给百度，有利于新页面更快被百度发现。怎么安装呢？<br>如果你的是 next 主题，只要打开主题配置文件搜索找到 baidu_push 设置为 true 即可</p>
<p><img src="https://ws1.sinaimg.cn/large/889d1a94gy1fz7ee6cn1hj20s001hglo.jpg" alt="image"></p>
<p>如果你使用的不是 next 主题，也可以手动把以下代码粘贴到你的站点，一般放在 head 头部公共文件里面</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">&lt;script&gt;</span><br><span class="line">(<span class="function"><span class="title">function</span></span>()&#123;</span><br><span class="line">    var bp = document.createElement(<span class="string">&#x27;script&#x27;</span>);</span><br><span class="line">    var curProtocol = window.location.protocol.split(<span class="string">&#x27;:&#x27;</span>)[0];</span><br><span class="line">    <span class="keyword">if</span> (curProtocol === <span class="string">&#x27;https&#x27;</span>) &#123;</span><br><span class="line">        bp.src = <span class="string">&#x27;https://zz.bdstatic.com/linksubmit/push.js&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        bp.src = <span class="string">&#x27;http://push.zhanzhang.baidu.com/push.js&#x27;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    var s = document.getElementsByTagName(<span class="string">&quot;script&quot;</span>)[0];</span><br><span class="line">    s.parentNode.insertBefore(bp, s);</span><br><span class="line">&#125;)();</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure>

<h3 id="七、主动推送"><a href="#七、主动推送" class="headerlink" title="七、主动推送"></a>七、主动推送</h3><p>这里利用一个第三方插件 <a target="_blank" rel="noopener" href="https://github.com/huiwang/hexo-baidu-url-submit">hexo-baidu-url-submit</a> 进行主动推送<br>安装</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install hexo-baidu-url-submit --save</span><br></pre></td></tr></table></figure>

<p>添加想关配置到根目录下的配置文件里</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 百度链接提交-主动推送配置</span></span><br><span class="line">baidu_url_submit:</span><br><span class="line">  count: 3 <span class="comment">## 提交最新的一个链接</span></span><br><span class="line">  host: pojian.xyz <span class="comment">## 在百度站长平台中注册的域名</span></span><br><span class="line">  token: 3GIEYsuq5ZTkvDBm <span class="comment">## 请注意这是您的秘钥，所以请不要把博客源代码发布在公众仓库里!</span></span><br><span class="line">  path: baidu_urls.txt <span class="comment">## 文本文档的地址， 新链接会保存在此文本文档里</span></span><br></pre></td></tr></table></figure>

<p>添加新的部署配置，注意这里跟之前有点不一样，要在 type 前添加一个破折号 -</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">deploy:</span><br><span class="line">  - <span class="built_in">type</span>: git</span><br><span class="line">    repo:</span><br><span class="line">      github: https://github.com/webw3c/webw3c.github.io.git</span><br><span class="line">      coding: https://git.dev.tencent.com/yusting/yusting.coding.me.git</span><br><span class="line">  - <span class="built_in">type</span>: baidu_url_submitter</span><br></pre></td></tr></table></figure>

<p>最后，执行 hexo deploy 的时候，新的连接就会被推送了。<br>** 实现原理 **<br>新链接的产生， hexo generate 会产生一个文本文件，里面包含最新的链接<br>新链接的提交， hexo deploy 会从上述文件中读取链接，提交至百度搜索引擎</p>
<h3 id="八、手动推送"><a href="#八、手动推送" class="headerlink" title="八、手动推送"></a>八、手动推送</h3><p>就是直接直接把你需要提交的链接直接使用手动的方式填写提交就可以。</p>
<p>最后你可以看到是否已经被百度成功收录了</p>
<p><img src="https://wx3.sinaimg.cn/large/889d1a94gy1fz7eumo8agj20ti0nkaez.jpg" alt="image"></p>
<p>如果抓取成功了就证明已经被收录了，好像一般不会这么快，我的等了两天左右才抓取得到。</p>
<h3 id="九、添加百度统计"><a href="#九、添加百度统计" class="headerlink" title="九、添加百度统计"></a>九、添加百度统计</h3><p>添加<a target="_blank" rel="noopener" href="https://tongji.baidu.com/web/homepage/index">百度统计</a>就可以查看你网站相关的一些数据，便于你自己的站点</p>
<p><img src="https://ws3.sinaimg.cn/large/889d1a94gy1fz7f4xv3w1j21hc0cx79q.jpg" alt="image"></p>
<p><img src="https://wx2.sinaimg.cn/large/889d1a94gy1fz7f64cwx8j21h00ec79e.jpg" alt="image"></p>
<h2 id="多端同步写作"><a href="#多端同步写作" class="headerlink" title="多端同步写作"></a>多端同步写作</h2><p>内容准备中…</p>
<h2 id="手机编写"><a href="#手机编写" class="headerlink" title="手机编写"></a>手机编写</h2><p>网上好像找不到什么资料，不过通过在手机端安装 SSH 客户端远程操作服务器端，安装配置 node / git / hexo 环境编写应该可以的，原理同多台电脑编写差不多，不过这样做不太省心，不折腾了哈。</p>
<h2 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h2><p>文章到这差不多啦！后续有些小点深入学习后还是会保持更新的，希望文章对曾经像我一样的小白有那么一点帮助，技术有限，难免有纰漏，欢迎指正批评和讨论，感谢阅读！:-)</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">PAN</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://geekweb.site/2018/12/20/hexo/">https://geekweb.site/2018/12/20/hexo/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://geekweb.site" target="_blank">乘风破浪</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/Hexo/">Hexo</a><a class="post-meta__tags" href="/tags/Github-Page/">Github Page</a><a class="post-meta__tags" href="/tags/SEO/">SEO</a></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2021/03/26/cBT8YwElLCU5qFV.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-full"><a href="/2019/01/22/macsshconnection/"><img class="prev-cover" src="https://i.loli.net/2021/03/26/YT1hgRiNql7V3Hz.png" onerror="onerror=null;src='/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">解决Mac下SSH闲时自动断开的问题</div></div></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" src="https://i.loli.net/2020/09/25/RVKnjUAof6kryGi.png" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">PAN</div><div class="author-info__description">研究Web前端开发技术和互联网产品</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">13</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">25</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">7</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">欢迎光临！</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%87%86%E5%A4%87%E7%8E%AF%E5%A2%83"><span class="toc-number">2.</span> <span class="toc-text">准备环境</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85-Hexo"><span class="toc-number">3.</span> <span class="toc-text">安装 Hexo</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%B3%A8%E5%86%8C-Github"><span class="toc-number">4.</span> <span class="toc-text">注册 Github</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-SSH-key"><span class="toc-number">5.</span> <span class="toc-text">配置 SSH key</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%83%A8%E7%BD%B2%E5%88%B0-Github"><span class="toc-number">6.</span> <span class="toc-text">部署到 Github</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%80%E5%A7%8B%E5%86%99%E4%BD%9C"><span class="toc-number">7.</span> <span class="toc-text">开始写作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%99%E6%80%81%E5%9B%BE%E5%BA%8A"><span class="toc-number">8.</span> <span class="toc-text">静态图床</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE"><span class="toc-number">9.</span> <span class="toc-text">主题配置</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E6%B7%BB%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F"><span class="toc-number">9.1.</span> <span class="toc-text">一、添加评论系统</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E9%85%8D%E7%BD%AE%E8%85%BE%E8%AE%AF%E5%85%AC%E7%9B%8A404%E9%A1%B5%E9%9D%A2"><span class="toc-number">9.2.</span> <span class="toc-text">二、配置腾讯公益404页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E6%B7%BB%E5%8A%A0%E5%AD%97%E6%95%B0%E7%BB%9F%E8%AE%A1%E5%92%8C%E9%98%85%E8%AF%BB%E6%97%B6%E9%95%BF"><span class="toc-number">9.3.</span> <span class="toc-text">三、添加字数统计和阅读时长</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E5%BC%80%E5%90%AFfancybox"><span class="toc-number">9.4.</span> <span class="toc-text">四、开启fancybox</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E6%96%87%E7%AB%A0%E5%88%86%E4%BA%AB"><span class="toc-number">9.5.</span> <span class="toc-text">五、文章分享</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%91%E5%AE%9A%E5%9F%9F%E5%90%8D"><span class="toc-number">10.</span> <span class="toc-text">绑定域名</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SEO%E4%BC%98%E5%8C%96"><span class="toc-number">11.</span> <span class="toc-text">SEO优化</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E4%BB%A3%E7%A0%81%E5%90%8C%E6%97%B6%E9%83%A8%E7%BD%B2%E5%88%B0-coding"><span class="toc-number">11.1.</span> <span class="toc-text">一、代码同时部署到 coding</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E7%99%BE%E5%BA%A6%E6%8F%90%E4%BA%A4%E9%93%BE%E6%8E%A5"><span class="toc-number">11.2.</span> <span class="toc-text">二、百度提交链接</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%89%E3%80%81%E7%99%BE%E5%BA%A6%E7%AB%99%E9%95%BF%E5%B9%B3%E5%8F%B0%E6%B7%BB%E5%8A%A0%E7%BD%91%E7%AB%99%E7%AE%A1%E7%90%86"><span class="toc-number">11.3.</span> <span class="toc-text">三、百度站长平台添加网站管理</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E6%B7%BB%E5%8A%A0sitemap%E7%AB%99%E7%82%B9%E5%9C%B0%E5%9B%BE"><span class="toc-number">11.4.</span> <span class="toc-text">四、添加sitemap站点地图</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E6%B7%BB%E5%8A%A0%E8%9C%98%E8%9B%9B%E5%8D%8F%E8%AE%AErobots-txt"><span class="toc-number">11.5.</span> <span class="toc-text">五、添加蜘蛛协议robots.txt</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%AD%E3%80%81%E8%87%AA%E5%8A%A8%E6%8E%A8%E9%80%81"><span class="toc-number">11.6.</span> <span class="toc-text">六、自动推送</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B8%83%E3%80%81%E4%B8%BB%E5%8A%A8%E6%8E%A8%E9%80%81"><span class="toc-number">11.7.</span> <span class="toc-text">七、主动推送</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%85%AB%E3%80%81%E6%89%8B%E5%8A%A8%E6%8E%A8%E9%80%81"><span class="toc-number">11.8.</span> <span class="toc-text">八、手动推送</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%B9%9D%E3%80%81%E6%B7%BB%E5%8A%A0%E7%99%BE%E5%BA%A6%E7%BB%9F%E8%AE%A1"><span class="toc-number">11.9.</span> <span class="toc-text">九、添加百度统计</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%9A%E7%AB%AF%E5%90%8C%E6%AD%A5%E5%86%99%E4%BD%9C"><span class="toc-number">12.</span> <span class="toc-text">多端同步写作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%89%8B%E6%9C%BA%E7%BC%96%E5%86%99"><span class="toc-number">13.</span> <span class="toc-text">手机编写</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BB%93%E8%AF%AD"><span class="toc-number">14.</span> <span class="toc-text">结语</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2022/11/25/http%E5%9B%BE%E8%A7%A3/" title="http图解"><img src="https://i.loli.net/2021/03/26/YT1hgRiNql7V3Hz.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="http图解"/></a><div class="content"><a class="title" href="/2022/11/25/http%E5%9B%BE%E8%A7%A3/" title="http图解">http图解</a><time datetime="2022-11-25T02:46:58.000Z" title="发表于 2022-11-25 10:46:58">2022-11-25</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2019/04/20/%E5%A6%82%E4%BD%95%E4%BF%9D%E8%AF%81%E9%A1%B5%E9%9D%A2%E6%96%87%E4%BB%B6%E8%83%BD%E8%A2%AB%E5%AE%8C%E6%95%B4%E9%80%81%E8%BE%BE%E6%B5%8F%E8%A7%88%E5%99%A8/" title="如何保证页面文件能被完整送达浏览器？"><img src="https://i.loli.net/2021/03/26/dhQMaZic2KpjLsG.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="如何保证页面文件能被完整送达浏览器？"/></a><div class="content"><a class="title" href="/2019/04/20/%E5%A6%82%E4%BD%95%E4%BF%9D%E8%AF%81%E9%A1%B5%E9%9D%A2%E6%96%87%E4%BB%B6%E8%83%BD%E8%A2%AB%E5%AE%8C%E6%95%B4%E9%80%81%E8%BE%BE%E6%B5%8F%E8%A7%88%E5%99%A8/" title="如何保证页面文件能被完整送达浏览器？">如何保证页面文件能被完整送达浏览器？</a><time datetime="2019-04-20T04:23:08.000Z" title="发表于 2019-04-20 12:23:08">2019-04-20</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2019/04/15/jscopy/" title="如何实现一个深浅拷贝"><img src="https://i.loli.net/2021/03/26/JmzkRwbiO7G1Tqx.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="如何实现一个深浅拷贝"/></a><div class="content"><a class="title" href="/2019/04/15/jscopy/" title="如何实现一个深浅拷贝">如何实现一个深浅拷贝</a><time datetime="2019-04-15T13:11:06.000Z" title="发表于 2019-04-15 21:11:06">2019-04-15</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2019/04/07/jsprototype/" title="JS原型和原型链"><img src="https://i.loli.net/2021/03/26/cBT8YwElLCU5qFV.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS原型和原型链"/></a><div class="content"><a class="title" href="/2019/04/07/jsprototype/" title="JS原型和原型链">JS原型和原型链</a><time datetime="2019-04-07T04:30:08.000Z" title="发表于 2019-04-07 12:30:08">2019-04-07</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2019/04/02/jsdata/" title="JS的数据类型"><img src="https://i.loli.net/2021/03/26/cBT8YwElLCU5qFV.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="JS的数据类型"/></a><div class="content"><a class="title" href="/2019/04/02/jsdata/" title="JS的数据类型">JS的数据类型</a><time datetime="2019-04-02T03:22:00.000Z" title="发表于 2019-04-02 11:22:00">2019-04-02</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2018 - 2023 By PAN</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><div class="js-pjax"></div><script id="click-show-text" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js" data-mobile="false" data-text="I,LOVE,YOU,富强,民主,文明,和谐,平等,公正,法治,爱国,敬业,诚信,友善" data-fontsize="15px" data-random="false" async="async"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>